<template>
  <div class="popup flex-center flex-align-items-center">
    <div class="bg" @click="close"></div>
    <div class="main flex">
      <div class="left">
        <div class="content flex flex-column flex-align-items-center">
          <img src="@/assets/logo-light.png">
          <h1 class="font-24">欢迎来到 fotohot</h1>
          <span class="font-18-B">{{ type === 1 ? '注册后，立即找红人' : '海外红人智能营销云' }}</span>
          <ul>
            <li class="flex flex-align-items-center">
              <i class="iconfont icon-duigou"></i>
              <span class="font-14">涵盖全球80%带货红人</span>
            </li>
            <li class="flex flex-align-items-center">
              <i class="iconfont icon-duigou"></i>
              <span class="font-14">2600万+红人带货数据</span>
            </li>
            <li class="flex flex-align-items-center">
              <i class="iconfont icon-duigou"></i>
              <span class="font-14">AI智能个性化推荐</span>
            </li>
            <li class="flex flex-align-items-center">
              <i class="iconfont icon-duigou"></i>
              <span class="font-14">竞品红人营销洞察</span>
            </li>
            <li class="flex flex-align-items-center">
              <i class="iconfont icon-duigou"></i>
              <span class="font-14">一键触达全程追踪</span>
            </li>
            <li class="flex flex-align-items-center">
              <i class="iconfont icon-duigou"></i>
              <span class="font-14">带货效果精准监控</span>
            </li>
          </ul>
          <div class="tips flex flex-align-items-center">
            <div class="line"></div>
            <span class="font-16">找红人 上凡兔</span>
            <div class="line"></div>
          </div>
        </div>
        <div class="mask"></div>
      </div>
      <div class="right flex flex-column flex-align-items-center">
        <img src="@/assets/logo.png" class="logo">
        <p class="name font-14">海外红人智能营销云</p>
        <div v-if="type === 1" class="content">
          <p class="title font-16-B">注册账号，免费体验</p>
          <div class="form-mobile flex">
            <p class="font-16">+86</p>
            <input type="text" v-model="form.phone" maxlength="11" placeholder="手机号" class="font-16" />
          </div>
          <!-- <div class="form-code flex">
                <input type="text" v-model="form.code" maxlength="6" placeholder="验证码" class="font-16" />
                <p class="font-16">发送验证码</p>
              </div> -->
          <input v-model="form.password" type="password" placeholder="8-20位密码" maxlength="20"
            class="form-pwd-input font-14">
          <input v-model="form.againPassword" type="password" placeholder="再次确认" maxlength="20"
            class="form-pwd-input font-14">
          <div class="form-mobile flex">
            <p class="font-16">邀请人</p>
            <input type="text" maxlength="24" placeholder="选填，没有可不填" class="font-14" />
          </div>
          <div class="agreement flex flex-align-items-center">
            <el-checkbox v-model="form.ready" />
            <p class="font-14">我已阅读并接受
              <span class="font-14 pointer"> 服务协议 </span>和
              <span class="font-14 pointer"> 隐私政策</span>
            </p>
          </div>
          <div class="submit-btn font-26-B pointer" :class="{ active: form.phone && form.password && form.againPassword }"
            @click="registerSubmit">注册
          </div>
          <div class="container-right-footer font-14">
            已有账号？<span class="font-14 pointer" @click="type = 2">去登录</span>
          </div>
        </div>
        <div v-if="type === 2" class="content">
          <el-tabs v-model="form.loginType">
            <!-- <el-tab-pane label="短信登录" name="code">
            <div class="form-mobile flex">
              <p class="font-20">+86</p>
              <input type="text" v-model="form.mobile" maxlength="16" placeholder="手机号" class="font-16" />
            </div>
            <div class="form-code flex">
              <input type="text" v-model="form.code" maxlength="8" placeholder="验证码" class="font-16" />
              <p class="font-16">发送验证码</p>
            </div>
          </el-tab-pane> -->
            <el-tab-pane label="密码登录" name="password">
              <input v-model="form.phone" type="text" placeholder="手机号/子账号" maxlength="32" class="form-pwd-input">
              <input v-model="form.password" type="password" placeholder="密码" maxlength="24" class="form-pwd-input">
            </el-tab-pane>
          </el-tabs>
          <div class="submit-btn font-16-B pointer"
            :class="{ active: (form.phone && form.code) || (form.phone && form.password) }" @click="loginSubmit">登录</div>
          <div class="container-right-footer flex-between flex-align-items-center">
            <el-checkbox v-model="form.autoLogin" label="下次自动登录" />
            <div class="flex flex-align-items-center">
              <p class="font-16 pointer" @click="toPath('/forget')">忘记密码</p>
              <span class="line"></span>
              <p class="font-16 pointer" @click="type = 1">注册</p>
            </div>
          </div>
          <div class="tips">
            <p class="font-14">杭州峤嘉文化传媒有限公司</p>
            <p class="font-14"> 若继续,则表示你同意凡兔的 <a href="#" class="font-14">网站声明</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineEmits, ref } from 'vue';
import api from '@/api/index';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

const router = useRouter();
const store = useStore();
const emit = defineEmits(['close', 'change']);


const type = ref(1);
const form = ref({
  loginType: 'password',
  autoLogin: true
});

const close = () => {
  emit('close', null);
}
const toPath = path => {
  router.push(path);
}
const registerSubmit = () => {
  if (!form.value.phone) {
    ElMessage.error('请输入手机号');
    return;
  }
  if (!/^1[3456789]\d{9}$/.test(form.value.phone)) {
    ElMessage.error('手机号格式不正确');
    return;
  }
  // if (!form.value.code) {
  //   ElMessage.error('请输入验证码');
  //   return;
  // }
  if (!form.value.password || form.value.password.length < 8) {
    ElMessage.error('密码位数在8-20');
    return;
  }
  if (form.value.password !== form.value.againPassword) {
    ElMessage.error('两次密码输入不一致');
    return;
  }
  if (!form.value.ready) {
    ElMessage.error('请阅读并接受服务协议和隐私政策');
    return;
  }
  api.login.registerSubmit(form.value).then(() => {
    ElMessage.success('注册成功');
    type.value = 2;
  }).catch(err => {
    ElMessage.error(err.msg);
  });
}
const loginSubmit = () => {
  if (form.value.loginType === 'password') {
    pwdloginSubmit();
  }
}
// 密码登录提交
const pwdloginSubmit = () => {
  if (form.value.phone === '') {
    ElMessage.error('请输入手机号/子账号');
    return;
  }
  if (form.value.password === '') {
    ElMessage.error('请输入密码');
    return;
  }
  api.login.loginSubmit(form.value).then(res => {
    ElMessage.success('登录成功');
    localStorage.setItem('token', res.token);
    store.commit('tokenChange', res.token);
    store.commit('userInfoChange', {});
    router.push('/adminKanBan');
  }).catch(() => {
    ElMessage.error('用户名或密码错误');
  });
}
</script>

<style lang="less" scoped>
.popup {
  .main {
    position: relative;
    z-index: 10;
    width: 806px;
    height: 644px;
    border-radius: 17px;
    background: #fff;
    overflow: hidden;

    .left {
      width: 304px;
      height: 100%;
      padding-top: 44px;
      background-image: url(@/assets/bg-login-pup.png);
      background-size: cover;
      position: relative;

      .content {
        position: relative;
        z-index: 10;

        img {
          height: 48px;
          margin-bottom: 24px;
        }

        h1 {
          line-height: 33px;
          margin-bottom: 8px;
          color: #d6dae2;
        }

        &>span {
          line-height: 25px;
          margin-bottom: 40px;
          color: #d6dae2;
        }

        ul {
          margin-bottom: 104px;
          padding-left: 0;

          li {
            height: 20px;
            margin-bottom: 14px;

            i {
              color: #d6dae2;
              font-size: 12px;
              margin-right: 16px;
            }

            span {
              color: #d6dae2;
            }
          }
        }

        .tips {
          height: 22px;

          .line {
            width: 50px;
            height: 2px;
            background: linear-gradient(270deg, #a3a8b9, hsla(0, 0%, 100%, 0));
            border-radius: 1px;
          }

          span {
            margin: 0 8px;
            color: #a3a8b9;
          }
        }
      }

      .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 304px;
        height: 100%;
        opacity: .4;
        background: #000;
      }
    }

    .right {
      flex: 1;
      padding-top: 32px;

      &::v-deep {
        .is-checked {
          .el-checkbox__inner {
            background: @main-color !important;
          }

          .el-checkbox__label {
            color: #333;
          }
        }

        .el-checkbox__inner {
          border-color: @main-color !important;
        }

        .el-tabs__header {
          margin-bottom: 30px !important;
        }

        .el-tabs__item {
          font-size: 16px;
          height: 45px;
          align-items: baseline;
        }

        .el-tabs__item.is-active {
          color: #333;
          font-weight: bold;
        }

        .el-tabs__item:hover {
          color: #333;
        }

        .el-tabs__active-bar {
          background: #333;
        }
      }

      .content {
        width: 336px;
      }

      .logo {
        margin-bottom: 16px;
        width: 147px;
      }

      .name {
        color: #333;
        margin-bottom: 24px;
      }

      .title {
        color: #333;
        margin-bottom: 24px;
        text-align: center;
      }

      .form-mobile {
        height: 50px;
        margin-bottom: 16px;
        border-radius: 4px;
        overflow: hidden;

        p {
          width: 86px;
          background: @main-color;
          color: #fff;
          text-align: center;
          line-height: 50px;
        }

        input {
          width: 302px;
          padding: 0 48px;
          border: none;
          outline: none;
          background: #f4f4f4;
        }
      }

      .form-code {
        margin-bottom: 16px;
        height: 50px;

        input {
          outline: none;
          width: 132px;
          border-radius: 4px;
          background: #f4f4f4;
          border: 1px solid #dcdfe6;
          text-align: center;
        }

        p {
          width: 116px;
          margin-left: 14px;
          border-radius: 4px;
          background: @main-color;
          color: #fff;
          text-align: center;
          line-height: 50px;
        }
      }

      .form-pwd-input {
        width: 100%;
        height: 50px;
        outline: none;
        border-radius: 4px;
        background: #f4f4f4;
        border: 1px solid #dcdfe6;
        padding: 0 55px;
        margin-bottom: 16px;
      }

      .agreement {
        margin-bottom: 10px;

        p {
          margin-left: 12px;
          color: #333;

          span {
            color: #d26f18;
          }
        }
      }

      .submit-btn {
        height: 56px;
        margin-bottom: 16px;
        border-radius: 4px;
        letter-spacing: 4px;
        background: #f4f4f4;
        color: #bbb;
        transition: all .32s;
        text-align: center;
        line-height: 56px;

        &.active {
          background: @main-color;
          color: #fff;
          transition: all .32s;
        }
      }

      .container-right-footer {
        text-align: center;
        color: #a9a9a9;

        span {
          color: #f09444;
        }

        p {
          color: #000;
        }

        .line {
          width: 1px;
          height: 14px;
          background-color: #878787;
          margin: 0 12px;
        }
      }

      .tips {
        margin-top: 100px;
        text-align: center;

        p {
          color: #a9a9a9;
          margin-bottom: 16px;

          a {
            color: #a9a9a9;
            text-decoration: none;
          }
        }
      }
    }
  }
}
</style>
